<template>
  <div class="app">
    
     <div class="top">
      <h3></h3>
        <div class="topimage">
          
            <img src="../image/canvas.png"   height="100%" 
           width="100%">
           <img src="../image/20210624110644.png"  alt="" height="110px" 
         width="470px"> 
         
       
        </div>          
     </div>
     <!-- 黑色菜单 -->
<div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
 <!-- 黑色菜单结束 -->

 <!-- 下拉菜单开始 -->
 
  <el-menu-item index="1">校园漫游</el-menu-item>
  <el-submenu index="2">
    <template slot="title">校园介绍</template>
    
    <el-submenu index="2-1">
      <template slot="title">科技楼</template>
      <el-menu-item index="2-1-1">科技楼介绍</el-menu-item>
      <el-menu-item index="2-1-2">科技楼全景图</el-menu-item>          
    </el-submenu>

    <el-submenu index="2-2">
      <template slot="title">基础楼</template>
      <el-menu-item index="2-2-1">基础楼介绍</el-menu-item>
      <el-menu-item index="2-2-2">基础楼全景图</el-menu-item>          
    </el-submenu>

    <el-submenu index="2-3">
      <template slot="title">第六教学楼</template>
      <el-menu-item index="2-3-1">第六教学楼介绍</el-menu-item>
      <el-menu-item index="2-3-2">第六教学楼全景图</el-menu-item>          
    </el-submenu>

    <el-submenu index="2-5">
      <template slot="title">第三教学楼</template>
      <el-menu-item index="2-1-1">第三教学楼介绍</el-menu-item>
      <el-menu-item index="2-1-2">第三教学楼全景图</el-menu-item>          
    </el-submenu>
      
      <el-submenu index="2-6">
      <template slot="title">第四教学楼</template>
      <el-menu-item index="2-1-1">第四教学楼介绍</el-menu-item>
      <el-menu-item index="2-1-2">第四教学楼全景图</el-menu-item>          
    </el-submenu>

    <el-submenu index="2-7">
      <template slot="title">第五教学楼</template>
      <el-menu-item index="2-1-1">第五教学楼介绍</el-menu-item>
      <el-menu-item index="2-1-2">第五教学楼全景图</el-menu-item>          
    </el-submenu>

    <el-submenu index="2-8">
      <template slot="title">宗元广场</template>
      <el-menu-item index="2-1-1">宗元广场介绍</el-menu-item>
      <el-menu-item index="2-1-2">宗元广场全景图</el-menu-item>          
    </el-submenu>

  </el-submenu>
  <el-menu-item index="3" disabled>学校官网</el-menu-item>
  <el-menu-item index="4"><a href="https://www.gxust.edu.cn/" target="_blank">学校官网</a></el-menu-item>
</el-menu>
   <!--下拉菜单结束  -->

<!-- 轮播开始 -->
<el-main >
  
 <el-carousel :interval="4000" type="card" height="400px" >
 
    <el-carousel-item style="width='800px'" v-for="item of swiperList" :key="item.id" >
      <el-link href="http://localhost:9528/#/vr/index" target="_self">
      <img :src="item.url" alt="" height="100%" width="100%">
     </el-link> 
    </el-carousel-item>
  </el-carousel>
</el-main>  

<!-- 轮播结束 -->




  <!-- 教学楼展示 -->
 


<el-row >
  <el-col :span="7" v-for=" index of swiperList" :key="index.id" :offset="index > 0 ? 1 : 1">
    <el-card :body-style="{ padding: '0px' }">
       <!-- <el-carousel-item  v-for="item of swiperList" :key="item.id" > -->
       <img :src="index.url" alt="" height="400px" width="400px">
     
         <div style="padding: 14x;">
        <span >
          {{index.name}}
        </span>
        <div class="bottom clearfix">        
   <el-popover class="b"
    placement="bottom"
    :title="index.title"
    width="410px"
    
    trigger="click"

    :content="index.introduce">
    <el-button slot="reference">{{index.name}}介绍</el-button>
  </el-popover>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row> 

 

  </div>
 
</template>
<script>
// 菜单样式
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        
       swiperList: [
         {
           id: '001',
           name: "科技楼",
           title:"科技楼介绍",
           url: 'http://5b0988e595225.cdn.sohucs.com/images/20190325/d7578d92033341aaa6a8f959f62cf00f.jpeg',
           introduce:"俗称科技楼，据传是比较新建的一栋楼，共有24层之高，特别显眼，由职教院、启迪、威爱等学院驻扎，虽是普通的四合院造型，结构却不见得简单，二楼中间近乎填满，只留下一个圆形大洞，东西在南侧或北侧相连取决于楼层。最初楼顶可以在24层通过楼梯登上，随后不知何故，加装了门禁，现普通学生已不能通过常规手段进入。结合二楼的大洞和南门入口的疑似机关的巨石，猜想广科大地下存在可以发射导弹的设施，或许一部分需要楼顶控制，故加装门禁，也有传言说楼顶实为直升机停机坪。懂的都懂，不懂的说了也不懂，现在网上基本都删干净了，利益牵扯太大，不推荐靠近。"
         },
         {
           id: '002',
           name: "基础楼",
          title:"基础楼介绍",
           url: 'http://gxcj365.com/Uploads/20140621/14033189477205.jpg',
           introduce:"基础楼：在六教以南，与六教通过空中航道相连，与行政楼对称。这里满是机房和实验室，机房配置各有不同，是与外校进行网络战争的主战场，迄今为止，广科大学子利用这里的电脑与外校进行了数次网络战争，互有胜负，其中在4396年的被称为“科技末日”的全球大规模网络战争中，我校学子在教务系统已被入侵的情况下，手执配置低下的电脑，漂亮地进行了“围魏救赵”，最终成功将入侵者断电，为世界和平立下了汗马功劳。而这里的实验室则夜以继日地进行着各项物理实验，以保证广科大在技术上的先进性。"
          },
          {
           id: '003',
           name: "第六教学楼",
           title:"第六教学楼介绍",
           url: 'http://gxcj365.com/Uploads/20140621/14033188723144.jpg',
           introduce:"简称六教，外观造型和结构都与五教非常相似，不同之处在于六教是北西南三面环绕，与五教正成对称之势，新生极易走错，一旦走错即是广科大一日游。也正因如此，六教本身乏善可陈，不过，楼顶肾么都没有，过于干净的楼顶反而给人一种危险的气息，或许最平凡的六教有着最多的秘密，并且值得注意的是六教与五教对科技楼形成两面包夹芝士，隐隐代表着对新兴势力的监控，有警告科技楼的年轻人不要太气盛，不要轻举妄动之意。"
          },
          {
           id: '004',
           name: "第三教学楼",
           title:"第三教学楼介绍",
           url: 'http://gxcj365.com/Uploads/20140621/1403318774104.jpg',
           introduce:"简称三教，四合院造型，共有5层，偏而不远，虽然名曰教学楼，但三教的教室其实很少，只有一层的四个大教室和207、208大教室，其余均为各种各样的办公室和实验室，主要由理学院、计通学院等学院在此驻扎。看似倒也稀松平常，但其中发现疑似手术室的结构，至今未能的得到任何解释。由于在通往楼顶时发现架好的梯子，故疑似有隐蔽的狙击手活动，此地极难被发现，一般没事不推荐靠近，毕竟保命要紧。"
          },
          {
           id: '005',
           name: "第四教学楼",
           title:"第四教学楼介绍",
           url: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/8b82b9014a90f603160d3af03412b31bb151edcc.jpg',
           introduce:"简称四教，是离南区宿舍最近的一栋教学楼，也是学生们上课和娱乐最常用的一栋教学楼，用途最为广泛。拥有装修华丽的报告厅和大小与报告厅相当的阶梯教室，以及其他大大小小的教室，大体分为A、B、C、D四块，ABC为正面看从左到右的三个部分，D则为北面的全部教室，东西两侧的大教室教室单独以四阶一（报告厅）、四阶二、四阶三……命名。其中位于中间的B区均为办公室，经管院、马院、外院等在此驻扎。而四教最恐怖的地方在于D区的一个隐藏货梯，成为广科大游乐场的一大惊悚项目。"
          },
          {
           id: '006',
           name: "第五教学楼",
           title:"第五教学楼介绍",
           url: 'http://gxcj365.com/Uploads/20140621/14033188723144.jpg',
           introduce:"简称五教，实际距离离宿舍最远，是北东南三面环绕的教学楼，共有六层，但南北楼层距离不一致，之间存在差异，适合埋伏因不熟悉地形而走错楼层的人。内置考研大自习室，其它教室也是有大有小，楼顶堆放着一些未使用过的灭火器和垃圾桶等常用物品，未来可能还有大的动作。其最大的特色，即负一楼，为一些学生组织办公室，大学生创业工业发展中心，还有名为“启迪K栈”的咖啡厅，是学生密会和密谋的不二选择。"
          },
          {
           id: '007',
           name: "宗元广场",
           title:"宗元广场介绍",
           url: 'https://www.gxust.edu.cn/__local/A/28/F6/129496291796027D5FE98EA7A26_ED18CCF3_A0EE.jpg?e=.jpg',
           introduce:"一个普通的广场，需要大规模摆摊活动时通常在此集中，周围环绕着各教学楼和实验楼，四通八达，据说曾经螺蛳山的几名术士在此施法，导致其地质结构紊乱，地下凭空生出取之不尽用之不竭的各种能源，与广科大西侧富饶的广科大平原遥相呼应，成为广科大巨大的资源宝库，于是广科大实现自主核电，但广科大人民不忘初心，依然积极节能减排，厉行勤俭节约，反对铺张浪费，物尽其用，招致外校的嫉妒。宗元广场就成为了外校的首选攻击目标，21世纪以来，外校轰炸机频繁光顾宗元广场，妄图从资源上限制广科大的发展，而广科大人民团结一心，保卫广科大，在宗元广场上空多次与敌激战，这广场上的一草一木都见证着辉煌的历史。"
          },
          
          
          
          
          
          ],
          timestamp:12321312312
       }
    }
  }
  //菜单样式结束
</script>
<style>
/* .el-main{
   background: blue; 
} */

.topimage{
  white-space:nowrap; 
 
}
 
.top h3{
  height: 20px;
  background-color: blue;
  margin-top: 0px;
}
.top .topimage
{width: 800px; 
  cursor: pointer;
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 600px;
    margin: 0;
  }
.el-carousel__item{
  width: 600px ! important; 
}

.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
.el-main{
background-color: cornsilk;

}
.el-row{
 
  background-color: cornsilk;
}
.el-row .el-col{
  margin-top: 20px;
}

</style>